<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <a-form-model
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 14 }"
      >
        <h4 class="card-label-title">佣金发放设置</h4>
        <a-form-model-item label="佣金发放类型" prop="giveType">
          <a-radio-group v-model="formData.giveType">
            <a-radio :value="1"> 佣金 </a-radio>
            <a-radio :value="2"> 积分 </a-radio>
            <a-radio :value="3"> 余额 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="佣金类型" prop="commission_type">
          <a-checkbox-group v-model="formData.commission_type">
            <a-checkbox :value="1"> 会员佣金 </a-checkbox>
            <a-checkbox :value="2"> 订单佣金 </a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
        <a-divider />
        <template>
          <h4 class="card-label-title">会员佣金计算设置</h4>
          <a-form-model-item label="一级分销名称" prop="first_name">
            <a-input style="width: 468px" v-model="formData.first_name" />
          </a-form-model-item>
          <a-form-model-item label="一级分销佣金" prop="first">
            <a-input style="width: 468px" type="number" :addonAfter="'%'" v-model="formData.first" />
          </a-form-model-item>
          <a-form-model-item label="二级分销名称" prop="second_name">
            <a-input style="width: 468px" v-model="formData.second_name" />
          </a-form-model-item>
          <a-form-model-item label="二级分销佣金" prop="second">
            <a-input style="width: 468px" type="number" :addonAfter="'%'" v-model="formData.second" />
          </a-form-model-item>
          <a-form-model-item label="三级分销名称" prop="third_name">
            <a-input style="width: 468px" v-model="formData.third_name" />
          </a-form-model-item>
          <a-form-model-item label="三级分销佣金" prop="third">
            <a-input style="width: 468px" type="number" :addonAfter="'%'" v-model="formData.third" />
          </a-form-model-item>
          <a-divider />
        </template>
        <template>
          <h4 class="card-label-title">订单佣金计算设置</h4>
          <a-form-model-item label="推广失效期" prop="expire_day">
            <a-input style="width: 468px" type="number" addonAfter="天" v-model="formData.expire_day" />
          </a-form-model-item>
          <a-form-model-item label="分销比例" prop="scale">
            <a-input style="width: 468px" type="number" addonAfter="%" v-model="formData.scale" />
          </a-form-model-item>
          <a-divider />
        </template>
      </a-form-model>
      <a-row :gutter="[30, 30]" style="margin: 6px 0" type="flex" align="middle" justify="center">
        <a-button type="primary" @click="onSave"> 保存 </a-button>
        <a-button
          style="margin-left: 8px"
          @click="
            () => {
              this.$router.go(-1)
            }
          "
        >
          取消
        </a-button>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { setMoneySetting, getShareSetting } from '@/api/share'

export default {
  components: {},
  data() {
    let checkFirst = (rule, value, callback) => {
      if (this.formData.commission_type.includes(1)) {
        if (!this.formData.first) {
          return callback(new Error('请输入一级分成比例'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    let checkSecond = (rule, value, callback) => {
      if (this.formData.commission_type.includes(1)) {
        if (!this.formData.second) {
          return callback(new Error('请输入二级分成比例'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    let checkThird = (rule, value, callback) => {
      if (this.formData.commission_type.includes(1)) {
        if (!this.formData.third) {
          return callback(new Error('请输入三级分成比例'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    let checkExpire = (rule, value, callback) => {
      if (this.formData.commission_type.includes(2)) {
        if (!this.formData.expire_day) {
          return callback(new Error('请输入失效期'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    let checkScale = (rule, value, callback) => {
      if (this.formData.commission_type.includes(2)) {
        if (!this.formData.scale) {
          return callback(new Error('请输入订单分成比例'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      formData: {
        // 佣金发放类型
        giveType: 1,
        // 佣金类型 1会员 2订单
        commission_type: [],
        // 一级分销名称
        first_name: '',
        // 一级分成佣金
        first: '',
        // 二级分销名称
        second_name: '',
        // 二级分成佣金
        second: '',
        // 三级分销名称
        third_name: '',
        // 三级分成佣金
        third: '',
        // 推广失效期
        expire_day: '',
        // 订单分成比例
        scale: '',
      },
      // 表单验证规则
      rules: {
        giveType: [{ required: true, message: '请选择佣金发放类型', trigger: 'change' }],
        first: [{ validator: checkFirst, trigger: 'change' }],
        second: [{ validator: checkSecond, trigger: 'change' }],
        third: [{ validator: checkThird, trigger: 'change' }],
        expire_day: [{ validator: checkExpire, trigger: 'change' }],
        scale: [{ validator: checkScale, trigger: 'change' }],
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    onSave() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const hide = this.$message.loading('提交中', 0)
          setMoneySetting(this.formData).then((res) => {
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success('保存成功！')
            }
          })
        } else {
          return false
        }
      })
    },
    getData() {
      var that = this
      var params = { name: 'share_money_setting' }
      getShareSetting(params).then((res) => {
        const data = res.data
        if(data && data.giveType) {
          var p = {
            giveType:data.giveType,
            commission_type:data.commission_type,
            first: data.level_one.value,
            first_name: data.level_one.text,
            second: data.level_two.value,
            second_name: data.level_two.text,
            third: data.level_three.value,
            third_name: data.level_three.text,
            expire_day:data.expire_day,
            scale:data.scale
          }
          Object.assign(that.formData, p)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-divider-inner-text {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.required::before {
  content: '*';
  color: red;
}
.input-class {
  width: 300px;
  margin: 10px 8px 25px 0;
}
.card-label-title {
  font-size: 16px;
  font-family: PingFangSC-Medium;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.85);
}
</style>
